<template>
  <div id="body">
    <el-row>
      <el-button @click="isShowStyle"
                 class="changeBtn"
                 type="primary">{{ this.text }}<i class="al-icon-carweb-icon-"></i></el-button>
    </el-row>

    <div v-show="show==1">
      <div class="areaSelect">
        <el-row>
          <span>{{$t('area.Layer')}}</span>
          <treeselect v-model="mapValue"
                      @input="handleMapChange"
                      :placeholder="$t('area.chosenLayer')"
                      :maxHeight="300"
                      :options="mapList" />
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-table :data="alarmDataList"
                    border
                    style="width: 100%">
            <el-table-column prop="alarmName"
                             :label="$t('alarm.AlarmName')"></el-table-column>
            <el-table-column :label="$t('operating.operating')"
                             width="100">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="handleFenceAlarm(scope.$index, scope.row)">{{$t('operating.handle')}}</el-button>
                <el-button type="text"
                           style="color: #F56C6C;"
                           @click="handleDelete(scope.$index, scope.row)">{{$t('operating.delete')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="addAlarm"
                     v-show="addBtnShow"
                     style="margin-top: 10px;"><i class="el-icon-plus"></i></el-button>
        </el-row>
      </div>
      <div id="mapbox">
        <!-- 地图容器 -->
        <div id="map"
             v-bind:style="{height: mapHeight, width: mapWidth}"></div>
        <div class="fenceTable"
             v-show="show4">
          <el-button type="primary"
                     icon="el-icon-circle-plus-outline"
                     @click="addDept()">{{$t('operating.add')}}</el-button>
          <el-table :data="fenceList"
                    style="width: 100%">
            <!--多选框-->
            <el-table-column prop="fenceName"
                             :label="$t('area.DepartmentArea')"
                             width="180"></el-table-column>
            <!--操作-->
            <el-table-column :label="$t('operating.operating')"
                             width="120">
              <template slot-scope="scope">
                <el-button size="mini"
                           @click="handleOneDelete(scope.$index, scope.row)"
                           type="danger">{{$t('operating.delete')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="positiondiv"><span></span></div>
        <div class="scalediv"><span></span></div>
      </div>
    </div>

    <!--新增和编辑-->
    <el-dialog width="45%"
               :title="$t('alarm.AlarmSet')"
               @close='closeDialog'
               @opened='alartSetDialogOpened'
               :close-on-click-modal="false"
               :visible="true"
               :modal="false"
               v-show="editVisible">

      <el-form ref="form"
               label-width="120px"
               @submit.navite="saveEdit">
        <!--告警名称-->
        <el-form-item :label="$t('alarm.AlarmName')">
          <el-input v-model="form.alarmName"
                    style="width: 215px;"></el-input>
        </el-form-item>
        <!--告警时间-->
        <el-form-item :label="$t('alarm.AlarmTime')">
          <el-time-picker editable
                          v-model="form.startTime"
                          value-format="HH:mm"
                          format="HH:mm"
                          style="width: 120px;"
                          :placeholder="$t('operating.StartTime')">
          </el-time-picker>
          <span>{{$t('operating.line')}}</span>
          <el-time-picker editable
                          v-model="form.endTime"
                          value-format="HH:mm"
                          style="width: 120px;"
                          format="HH:mm"
                          :placeholder="$t('operating.EndTime')">
          </el-time-picker>
        </el-form-item>

        <!--告警周期-->
        <el-form-item :label="$t('alarm.AlarmCycle')">
          <el-checkbox :indeterminate="isIndeterminate"
                       v-model="checkAll"
                       @change="handleCheckAllChange">{{$t('operating.checkAll')}}</el-checkbox>
          <div style="margin: 10px 0;"></div>
          <el-checkbox-group v-model="checkedWeeks"
                             @change="handleCheckedWeekChange">
            <el-checkbox v-for="week in weeks"
                         :label="week"
                         :key="week">{{week}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!--告警类型-->
        <el-form-item :label="$t('alarm.alarmType')">
          <el-select v-model="form.alarmType"
                     filterable
                     :placeholder="$t('operating.pleaseChosen')"
                     @change="alarmTypeSelect"
                     style="max-width: 215px;">
            <el-option v-for="item in $t('alarm.alarmTypeList')"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!--绑定摄像头-->
        <el-form-item :label="$t('area.BindingCamera')">
          <el-select v-model="cameraId"
                     :multiple='true'
                     filterable
                     :placeholder="$t('Notice.bindingCamera')"
                     style="max-width: 215px;">
            <el-option v-for="item in cameraList"
                       :key="item.idx"
                       :label="item.cameraName"
                       :value="item.idx"></el-option>
          </el-select>
        </el-form-item>
        <!--告警对象-->
        <el-form-item :label="AlarmObjectLabel"
                      v-if="peopleList">
          <el-radio-group v-model="radioType">
            <el-radio :label="true">{{$t('alarm.byPerson')}}</el-radio>
            <el-radio :label="false">{{$t('alarm.byDepartment')}}</el-radio>
          </el-radio-group>
          <!-- 人员树 -->
          <tree-transfer :filter='true'
                         openAll
                         :filter-placeholder="$t('operating.pleaseWrite')"
                         :title="$t('alarm.peopleTitle')"
                         :from_data='peopleData'
                         :to_data='toPeopleData'
                         node-key="id"
                         :defaultCheckedKeys="defaultCheckedPeople"
                         defaultTransfer
                         :defaultProps="{label:'label'}"
                         :placeholder="$t('Notice.keywordFiltering')"
                         @addBtn="addPeople"
                         @removeBtn='removePeople'
                         v-show="radioType">
          </tree-transfer>
          <!-- 部门树 -->
          <tree-transfer :filter='true'
                         openAll
                         :filter-placeholder="$t('operating.pleaseWrite')"
                         :title="$t('alarm.deptTitle')"
                         :from_data='deptData'
                         :to_data='toDeptData'
                         node-key="id"
                         :defaultCheckedKeys="defaultCheckedDept"
                         defaultTransfer
                         :defaultProps="{label:'label'}"
                         :placeholder="$t('Notice.keywordFiltering')"
                         @addBtn="addDept"
                         @removeBtn='removeDept'
                         v-show="!radioType">
          </tree-transfer>

        </el-form-item>
        <el-form-item :label="$t('alarm.AlarmMode')">
          <el-checkbox v-model="showRecord"
                       :label="$t('alarm.report')"
                       name="type"></el-checkbox>
          <el-checkbox v-model="showAudio"
                       @change="showPrise1"
                       :label="$t('alarm.Sound')"
                       name="type"></el-checkbox>
          <el-checkbox v-model="showAlertor"
                       :label="$t('alarm.AudibleAlarm')"
                       name="type"></el-checkbox>
        </el-form-item>

        <!-- 标签告警 -->
        <el-form-item :label="$t('alarm.tagAlarmLabel')">
          <el-row>
            <el-col :span="8">
              <el-checkbox v-model="checkTagMotor"
                           :label="$t('alarm.motorLabel')"></el-checkbox>
              <el-select v-model="motorConfigValue"
                         v-show="checkTagMotor">
                <el-option v-for="item in selectMotorData"
                           :key="item.idx"
                           :value="item.idx"
                           :label="item.name"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-checkbox v-model="checkTagBuzzer"
                           :label="$t('alarm.buzzerLabel')"></el-checkbox>
              <el-select v-model="buzzerConfigValue"
                         v-show="checkTagBuzzer">
                <el-option v-for="item in selectBuzzerData"
                           :key="item.idx"
                           :value="item.idx"
                           :label="item.name"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-checkbox v-model="checkTagLED"
                           :label="$t('alarm.ledLabel')"></el-checkbox>
              <el-select v-model="ledConfigValue"
                         v-show="checkTagLED">
                <el-option v-for="item in selectLEDData"
                           :key="item.idx"
                           :value="item.idx"
                           :label="item.name"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item v-if="showAlertor"
                      :label="$t('alarm.alertorList')">
          <el-select v-model="alertorId"
                     :multiple='true'
                     filterable
                     :placeholder="$t('menuManage.pleaseChoose')"
                     style="max-width: 215px;">
            <el-option v-for="item in alertorList"
                       :key="item.idx"
                       :label="item.name"
                       :value="item.idx"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="showPrise">
          <el-upload class="upload-demo"
                     :show-file-list="false"
                     :before-upload="beforeupload"
                     :expand-on-click-node="false"
                     drag
                     action="">
            <el-button size="small"
                       type="primary">{{ $t('alarm.uploadBtn') }}</el-button>
            <div slot="tip"
                 class="el-upload__tip">{{ $t('alarm.uploadDescription') }}</div>
          </el-upload>
        </el-form-item>

        <el-form-item :label="$t('alarm.gatherOverName')"
                      v-if="gatherOver">
          <el-input v-model="form.gatherOverNumber"
                    style="width: 215px;"></el-input>
        </el-form-item>

        <!--是否启用邮箱-->
        <el-form-item :label="$t('alarm.mailEnable')">
          <el-switch v-model="emailEnable"
                     @change="changeEmailEnable"></el-switch>
          <el-input v-model="emailList"
                    v-show="emailEnable"
                    @blur="checkEmailFormat"
                    style="width: 215px;"></el-input>
        </el-form-item>
        <!--是否启用该任务-->
        <el-form-item :label="$t('operating.isEnable')">
          <el-switch v-model="switchVal"
                     inactive-value="0"
                     active-value="1"
                     active-color="#ffc000"
                     inactive-color="#dcdfe6"
                     @change="isSwitch"></el-switch>
        </el-form-item>
      </el-form>
      <!--操作-->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="saveEdit"
                   type="primary">{{$t('operating.determine')}}</el-button>
        <el-button @click="closeDialog">{{$t('operating.cancel')}}</el-button>
      </span>
    </el-dialog>
    <!--删除提示框-->
    <el-dialog :title="$t('operating.prompt')"
               :close-on-click-modal="false"
               :visible.sync="delVisible">
      <div class="del-dialog-cnt">{{$t('operating.deletePrompt')}}</div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="deleteRow"
                   type="primary">{{$t('operating.determine')}}</el-button>
        <el-button @click="delVisible = false">{{$t('operating.cancel')}}</el-button>
      </span>
    </el-dialog>
    <div v-show="show == 2">
      <el-main>
        <el-table :data="alarmData"
                  :height="tableHeight">
          <el-table-column prop="layerName"
                           :label="$t('area.LayerName')"
                           min-width="120"></el-table-column>
          <el-table-column prop="alarmName"
                           :label="$t('alarm.AlarmName')"
                           min-width="120"></el-table-column>
          <el-table-column prop="alarmType"
                           :formatter="alarmTypeChange"
                           :label="$t('alarm.alarmType')"
                           min-width="120"></el-table-column>
          <el-table-column prop="fenceName"
                           :label="$t('alarm.alarmFence')"
                           min-width="120"></el-table-column>
          <el-table-column prop="resourceNames"
                           :label="$t('alarm.AlarmObject')"
                           min-width="180"></el-table-column>
          <el-table-column prop="alarmTime"
                           :formatter="reAlarmTime"
                           :label="$t('alarm.AlarmTime')"
                           min-width="150"></el-table-column>
          <el-table-column prop="cycle"
                           :formatter="alarmCycle"
                           :label="$t('alarm.AlarmCycle')"
                           min-width="280"></el-table-column>
          <el-table-column :label="$t('operating.operating')"
                           width="180">
            <template slot-scope="scope">
              <el-button @click="handleFenceAlarm(scope.$index, scope.row)">{{$t('operating.handle')}}</el-button>
              <el-button @click="handleDelete(scope.$index, scope.row)"
                         type="danger">{{$t('operating.delete')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[10,25, 50, 100]"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total='total'>
          </el-pagination>
        </div>
      </el-main>
    </div>

  </div>
</template>

<script>
import ol from 'openlayers'
import {
  Load_Map,
  Load_Fence,
  _TransPixel,
  TagStyle,
  _dPR,
  _iMap,
  t,
  FenceLayer,
  FenceSource,
  Load_Camera,
  CameraSource,
  releaseFence,
  LoadTypeData,
  sendThis
} from '@/utils/iMap.js'
import { Select } from 'ol/interaction.js'
import treeTransfer from '@/components/TransferExtend' // 源码位置
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { basename } from 'path'
import { baseUrl } from '@/utils/global.js'
import Cookie from 'js-cookie'

export default {
  data () {
    return {
      weekDays: this.$t('alarm.cycle'),
      switchVal: '1',// 是否启用
      emailEnable: true, // 是否启用邮箱
      emailList: '',

      tableDataUrl: '',
      deptValue: '',
      color2: null,// ColorPicker 颜色选择器,无默认值；
      oldMapId: '',
      alarmData: [],
      mapList: [],
      alarmDataList: [], // 获取围栏告警信息数据
      fenceList: [],
      mapValue: null, // 选择的地图
      text: this.$t('operating.tabularMode'),
      show: '1', // 切换显示的页面
      show3: false,
      show4: false,
      mapHeight: window.innerHeight - 130 + 'px', // 地图区域高度
      mapWidth: window.innerWidth + 'px',

      alertorList: [], // 声光报警器列表
      alertorId: [], // 选中的声光报警器列表
      cameraList: [],
      cameraId: [],
      alarmType: '',
      currentPage: 1,// 当前所在页
      total: 0,// 总页数
      pageSize: '10',//
      alarmId: '',// 告警Id
      file: new FormData(),// 音频文件

      deptObjData: [],
      deptObjDataCopy: [],
      showRecord: true,
      showAudio: '',
      showAlertor: false,
      showPrise: false,
      gatherOver: false,
      peopleList: true,

      /*****************标签告警***************/
      checkTagMotor: false,
      checkTagBuzzer: false,
      checkTagLED: false,

      motorConfigValue: 0,
      selectMotorData: [],
      buzzerConfigValue: 0,
      selectBuzzerData: [],
      ledConfigValue: 0,
      selectLEDData: [],

      /*****************标签告警***************/

      /*********************表格相关*********************/
      tableHeight: window.innerHeight - 240,
      addBtnShow: false,
      editVisible: false, // 编辑框是否可见
      delVisible: false, // 删除框是否可见
      _select: null,
      editEnable: true, // 点击的编辑or添加
      // 用户表单提交
      form: { startTime: '00:00', endTime: '23:59' },

      //  **************告警周期相关参数**************  //
      checkAll: false,
      weeks: this.$t('alarm.cycle'),
      checkedWeeks: this.$t('alarm.defaultChecked'),
      isIndeterminate: true,

      //  **************树形穿梭框相关参数**************  //
      peopleData: [], // 人员列表
      toPeopleData: [], // 已选人员
      toPeopleDataTwo: [],
      defaultCheckedPeople: [], // 默认选择人员

      // 部门
      deptData: [], // 部门列表
      toDeptData: [], // 已选部门
      toDeptDataTwo: [],
      defaultCheckedDept: [], // 默认选择部门

      fenceId: 0,// 选中的围栏id
      selectFeature: '',// 选中围栏
      selectPointerMove: null,
      radioType: true, // 按照人员还是按照部门显示
      AlarmObjectLabel: '',
    }
  },
  components: { treeTransfer, Treeselect }, // 注册树形穿梭框组件

  mounted () {
    this.AlarmObjectLabel = this.$t('alarm.AlarmObject');
    // 动态设置map的高度
    // 首先在DOM渲染数据时，设置map的高度
    this.windowRefresh();
    // 然后监听window的resize事件，在浏览器窗口变化时再设置下map的高度
    let self = this;
    window.onresize = function temp () {
      self.windowRefresh();
    }

    this.init();

    this.getDeptTree();
    this.getAlarmConfigData();
  },
  methods: {
    changeEmailEnable (val) {

    },

    // 获取告警等级配置
    getAlarmConfigData () {
      this.$api.alarmlevelmanage.getTableData({ "type": "motor" }).then(res => {
        let RES = this.responseUse(res);
        this.selectMotorData = RES;
      })

      this.$api.alarmlevelmanage.getTableData({ "type": "buzzer" }).then(res => {
        let RES = this.responseUse(res);
        this.selectBuzzerData = RES;
      })

      this.$api.alarmlevelmanage.getTableData({ "type": "led" }).then(res => {
        let RES = this.responseUse(res);
        this.selectLEDData = RES;
      })

    },

    checkEmailFormat (event) {
      //定义正则表达式的变量:邮箱正则
      var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

      if (this.emailList != "" && this.emailList.search(reg) != -1) {

      } else {
        this.v_MyMessage('邮箱格式错误！', 'error');
      }

    },

    //刷新窗口
    windowRefresh () {
      this.mapHeight = window.innerHeight - 130 + 'px';
      this.mapWidth = window.innerWidth + 'px';
      this.tableHeight = window.innerHeight - 250;
    },

    // 告警设置Dialog打开动画结束之后的回调
    alartSetDialogOpened () {
      this.alarmTypeSelect();
    },

    //重置表格显示格式
    //巡检周期格式
    alarmCycle (row, column) {
      let stringWeek = []
      if (row.cycle) {
        let cycleArr = row.cycle.split(',');
        for (let j = 0; j < cycleArr.length; j++) {
          if (cycleArr[j] == 1) {
            stringWeek.push(this.weeks[j]);
          }
        }
        return stringWeek.join('，');
      }
    },
    //巡检时间格式
    reAlarmTime (row, column) {
      return row.timeStart + '-' + row.timeEnd;
    },
    alarmTypeChange (row, column) {
      if (row.alarmType == 'alarmOut') {
        return this.$t('alarm.alarmTypes.illegalDeparture');
      } else if (row.alarmType == 'alarmIn') {
        return this.$t('alarm.alarmTypes.illegalEntry');
      } else if (row.alarmType == 'gatherOver') {
        return this.$t('alarm.alarmTypes.overAlert');
      } else if (row.alarmType == 'lackOfStaff') {
        return this.$t('alarm.alarmTypes.missingAlarm');
      } else if (row.alarmType == 'stay') {
        return this.$t('alarm.alarmTypes.retentionAlarm');
      }
    },
    //获取告警任务列表
    getAlarmData () {
      let param = {
        'pageNum': this.currentPage,
        'pageSize': this.pageSize,
        'columnFilters': { 'fenceType': { 'name': 'fenceType', 'value': 'alarm' } }
      }
      this.$api.alarmmanage.AlarmList(param).then(res => {
        let RES = this.responseUse(res);
        this.total = RES.totalSize;
        this.alarmData = RES.content;
      })
    },
    staffTree () {
      this.$api.alarmmanage.staffTree().then(res => {
        let RES = this.responseUse(res);
        this.peopleData = RES;
      })
    },
    deptTree () {
      this.$api.departmentmanage.getDeptTree().then(res => {
        let RES = this.responseUse(res);
        this.deptData = RES;
      })
    },

    //获取部门列表数据
    getDeptTree () {
      this.$api.departmentmanage.getDeptTree().then(res => {
        let RES = this.responseUse(res);
        this.deptData = RES;
      })
    },

    //页面显示模式
    isShowStyle () {
      if (this.show == 1) {
        this.text = this.$t('operating.mapMode');
        this.show = 2;
      } else if (this.show == 2) {
        this.text = this.$t('operating.tabularMode');
        this.show = 1;
        if (this.fenceId != 0) {
          this.handleMapChange();
        }
        this.addBtnShow = false;
        this.alarmDataList = [];
      }
    },

    //重置表格显示格式
    //所有围栏列表
    fenceListSave (row, column) {
      let fenceArr = [];
      if (row.fenceList) {
        for (let j = 0; j < row.fenceList.length; j++) {
          fenceArr.push(row.fenceList[j].fenceName);
        }
        return fenceArr.join('，');
      }
    },
    closeDialog () {
      _iMap.removeInteraction(this.selectPointerMove)
      this.editVisible = false;
      this.editTableVisible = false;
      this.defaultCheckedPeople = [];
      this.fenceSelect();
      this.staffTree();
      this.deptTree();
    },
    // 初始化默认地图
    initMap () {
      Load_Map(this.$store.state.initPicPath, 67.65, 54.16, 1600, 1280, 1600 / 67.65, [-60, -30]);
      sendThis(this);
      LoadTypeData();
    },
    //初始化函数
    init () {
      // 加载地图树
      this.$api.realtimeposition.getMapTree().then(res => {
        let RES = this.responseUse(res);
        this.mapList = RES;
      })
      //初始化地图
      this.initMap();

      //执行获取表格中json数据的函数
      this.getAlarmData();
      this.staffTree();
      this.deptTree();
    },

    //切换图层
    handleMapChange () {
      this.selectPointerMove = null;

      _iMap.removeInteraction(this.selectPointerMove);

      if ('' == this.mapValue) {
        this.v_MyMessage(this.$t('Notice.mapIDIsEmpty'), 'error');
        return false;
      } else {
        if (this.oldMapId != this.mapValue) {
          this.$api.realtimeposition.getMap(this.mapValue).then(res => {
            let RES = this.responseUse(res);
            this.mapName = RES.mapName;
            Load_Map(
              baseUrl + RES.mapPath,
              RES.mapActualX,
              RES.mapActualY,
              RES.mapPixelX,
              RES.mapPixelY,
              RES.mapPixelX / RES.mapActualX,
              [RES.mapOriginX, RES.mapOriginY]
            );
            this.Geo = baseUrl + '/fenceInfo/findListByFenceTypeGeoJson?fenceType=alarm&layerId=' + this.mapValue;
            releaseFence();
            Load_Fence(this.Geo);

            this.fenceSelect();
            this.getCameraList(this.mapValue);
            this.getAlertorList(this.mapValue);
          })
        }
      }
    },
    getCameraList (data) {
      this.$api.cameramanage.cameraLayerList(data).then(res => {
        let RES = this.responseUse(res);
        this.cameraList = RES;
      })
    },
    // 获取声光报警器列表
    getAlertorList (data) {
      this.alertorList = [];
      this.$api.alertormanage.getAlertorList(data).then(res => {
        let RES = this.responseUse(res);
        for (let i = 0; i < RES.length; i++) {
          if (RES[i].layerId == this.mapValue) {
            this.alertorList.push(RES[i]);
          }
        }
      })
    },
    //  选择围栏
    fenceSelect () {
      let self = this;
      self.selectPointerMove = new Select();
      _iMap.addInteraction(self.selectPointerMove);
      self.selectPointerMove.on('select', function (e) {
        if (e.selected.length > 0) {//鼠标移入，选择了一个，大概是mouseover事件
          if (e.selected[0].get('type') == 'Fence') {
            e.selected.forEach(function (f) {
              self.addBtnShow = true;
              self.fenceId = f.get('id');
              self.getFenceAlarm(self.fenceId);
            })
          }
        } else {
          // 隐藏添加按钮，清除表格数据，重置围栏ID变量
          self.addBtnShow = false;
          self.alarmDataList = [];
          self.fenceId = 0;
        }
      })
    },

    getFenceAlarm (fenceId) {
      this.$api.alarmmanage.alarmFenceList(fenceId).then(res => {
        let RES = this.responseUse(res);
        this.alarmDataList = RES;
      })
    },

    //阻止upload的自己上传，进行再操作
    beforeupload (file) {
      const fileNameArr = file.name.split('.');
      const typeName = fileNameArr[fileNameArr.length - 1].toLocaleLowerCase();
      if (typeName != 'mp3' && typeName != 'wav') {
        this.$message('上传文件只能是 mp3、wav格式!');
        return false;
      }
      this.file.append('file', file);
      return false;
    },
    //是否上传音频
    showPrise1 () {
      if (this.showAudio) {
        this.showPrise = true;
      } else {
        this.showPrise = false;
      }
    },
    alarmTypeSelect () {
      if (this.form.alarmType === 'gatherOver') {
        this.gatherOver = true;
        this.peopleList = false;
      } else {
        this.gatherOver = false;
        this.peopleList = true;
      }

      // 检测是否为非法进入
      if (this.form.alarmType === 'alarmIn') {
        this.AlarmObjectLabel = this.$t('alarm.NoAlarmObject');
      } else {
        this.AlarmObjectLabel = this.$t('alarm.AlarmObject');
      }
    },
    //添加新的围栏告警信息
    addAlarm () {
      this.editVisible = true;
      this.editEnable = true;
      this.isIndeterminate = true;
      this.form = { startTime: '00:00', endTime: '23:59' };
      this.checkedWeeks = this.$t('alarm.defaultChecked');
      this.toPeopleData = [];
      this.toPeopleDataTwo = [];

      this.toDeptData = [];
      this.toDeptDataTwo = [];

      this.alertorId = [];
      this.cameraId = [];
      this.switchVal = '1';

      this.emailEnable = false;
      this.emailList = '';
      this.showRecord = true;
      this.showPrise = false;
      this.gatherOver = false;

      this.motorConfigValue = 0;
      this.buzzerConfigValue = 0;
      this.ledConfigValue = 0;
    },

    //修改告警信息
    handleFenceAlarm (index, row) {
      let self = this;

      self.fenceId = row.fenceId;
      let obj = {};
      obj.startTime = '';
      obj.endTime = '';
      self.checkedWeeks = [];
      self.editEnable = false;
      self.isIndeterminate = true;
      self.alarmId = row.idx;

      self.toPeopleDataTwo = [];
      self.toPeopleData = [];

      self.toDeptDataTwo = [];
      self.toDeptData = [];

      self.$api.alarmmanage.fenceOneAlarm(row.idx).then(res => {
        let RES = self.responseUse(res);
        self.getCameraList(RES.layerId);
        self.getAlertorList(RES.layerId);

        self.editVisible = true;

        if (RES.personnelList) {
          self.defaultCheckedPeople = RES.personnelList.split(','); // 更新人员列表信息
          self.radioType = true;
        }
        if (RES.departmentList) {
          self.defaultCheckedDept = RES.departmentList.split(','); // 更新部门列表信息
          self.radioType = false;
        }

        obj.startTime = RES.timeStart;
        obj.endTime = RES.timeEnd;
        obj.alarmType = RES.alarmType;
        obj.alarmName = RES.alarmName;
        if (RES.gatherOverNumber !== '' && RES.gatherOverNumber !== null && RES.gatherOverNumber !== undefined) { // 超员告警
          obj.gatherOverNumber = RES.gatherOverNumber;
          self.gatherOver = true;
          self.peopleList = false;
        } else {
          self.gatherOver = false;
          self.peopleList = true;
        }
        if (RES.bandCameraList != '' && RES.bandCameraList != null && RES.bandCameraList != undefined) {
          self.cameraId = RES.bandCameraList.split(',').map(Number);
        } else {
          self.cameraId = [];
        }

        if (RES.alertorList != '' && RES.alertorList != null && RES.alertorList != undefined) {
          self.alertorId = RES.alertorList.split(',').map(Number);
        } else {
          self.alertorId = [];
        }

        self.form = obj;
        self.checkedWeeks = [];
        if (RES.cycle) {
          let cycleArr = RES.cycle.split(',');
          for (let j = 0; j < cycleArr.length; j++) {
            if (cycleArr[j] == 1) {
              self.checkedWeeks.push(self.weeks[j]);
            }
          }
        }
        if (self.checkedWeeks.length == self.weekDays.length) {
          self.isIndeterminate = false;
        }
        if (RES.enable == 1) {
          self.switchVal = '1';
        } else if (RES.enable == 0) {
          self.switchVal = '0';
        }

        // 是否启用邮箱
        if (RES.showEmail == "1") {
          self.emailEnable = true;
          self.emailList = RES.emailList;
        } else {
          self.emailEnable = false;
          self.emailList = "";
        }

        if (RES.showRecord == 1) {
          self.showRecord = true;
        } else if (RES.showRecord == 0) {
          self.showRecord = false;
        }

        // 声光报警器
        if (RES.showAlertor == 1) {
          self.showAlertor = true;
        } else {
          self.showAlertor = false;
        }

        if (RES.showAudio == 1) {
          self.showAudio = true;
          self.showPrise = true;
        } else if (RES.showAudio == 0) {
          self.showAudio = false;
        }

        // 标签告警
        if (RES.tagAlarmMotorId && RES.tagAlarmMotorId !== 0) {
          self.checkTagMotor = true;
          self.motorConfigValue = RES.tagAlarmMotorId;
        } else {
          self.checkTagMotor = false;
          self.motorConfigValue = 0;
        }
        if (RES.tagAlarmBuzzerId && RES.tagAlarmBuzzerId !== 0) {
          self.checkTagBuzzer = true;
          self.buzzerConfigValue = RES.tagAlarmBuzzerId;
        } else {
          self.checkTagBuzzer = false;
          self.buzzerConfigValue = 0;
        }
        if (RES.tagAlarmLedId && RES.tagAlarmLedId !== 0) {
          self.checkTagLED = true;
          self.ledConfigValue = RES.tagAlarmLedId;
        } else {
          self.checkTagLED = false;
          self.ledConfigValue = 0;
        }
      })
    },

    // 确认添加围栏告警信息
    saveEdit () {
      let cycle = [];
      for (let i = 0; i < this.weekDays.length; i++) {
        if (this.checkedWeeks.indexOf(this.weekDays[i]) > -1) {
          cycle.push(1);
        } else {
          cycle.push(0);
        }
      }
      let enable = '';
      if (this.switchVal == true) {
        enable = 1;
      } else {
        enable = 0;
      }

      let emailenable = '';
      if (this.emailEnable == true) {
        emailenable = '1';
      } else {
        emailenable = '0';
      }

      if (this.showRecord == true) {
        this.showRecord = 1;
      } else {
        this.showRecord = 0;
      }

      // 声光报警器
      if (this.showAlertor == true) {
        this.showAlertor = 1;
      } else {
        this.showAlertor = 0;
      }

      if (this.showAudio == true) {
        this.showAudio = 1;
      } else {
        this.showAudio = 0;
      }

      if (this.form.timeStart == '' || this.form.timeEnd == '') {
        this.v_MyMessage(this.$t('Notice.pleaseSelectTime'), 'error');
        return false;
      }

      this.file.append('alarmType', this.form.alarmType);
      this.file.append('alarmName', this.form.alarmName);

      this.file.append('timeStart', this.form.startTime);
      this.file.append('timeEnd', this.form.endTime);
      this.file.append('cycle', cycle.join(','));
      this.file.append('bandCameraList', this.cameraId + '');
      this.file.append('enable', enable);
      this.file.append('fenceId', this.fenceId);
      this.file.append('showRecord', this.showRecord);
      this.file.append('showAlertor', this.showAlertor);
      if (this.showAlertor == 1) {
        this.file.append('alertorList', this.alertorId);
      }
      this.file.append('showAudio', this.showAudio);

      this.file.append('showEmail', emailenable);
      if (this.emailEnable) {
        this.file.append('emailList', this.emailList);
      }

      if (this.radioType) { // 选择了人员列表
        this.file.append('personnelList', this.toPeopleDataTwo.join(','));
      } else { // 选择了部门列表
        this.file.append('departmentList', this.toDeptDataTwo.join(','));
      }

      // 检查是否有超员人数设置
      if (this.form.gatherOverNumber != null && this.form.gatherOverNumber != undefined && this.form.gatherOverNumber != '') {
        this.file.append('gatherOverNumber', this.form.gatherOverNumber);
      } else {
        this.file.append('gatherOverNumber', '');
      }

      // 标签告警配置**********************************************
      if (this.checkTagMotor) {
        this.file.append('tagAlarmMotorId', this.motorConfigValue);
      }

      if (this.checkTagBuzzer) {
        this.file.append('tagAlarmBuzzerId', this.buzzerConfigValue);
      }

      if (this.checkTagLED) {
        this.file.append('tagAlarmLedId', this.ledConfigValue);
      }

      if (!this.editEnable) {
        this.file.append('idx', this.alarmId);
      }
      this.$api.alarmmanage.addAlarm(this.file, { 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime() }).then(res => {
        let RES = this.responseUse(res, true);
        if (RES) {
          this.editVisible = false;
          this.getAlarmData();
          this.toPeopleDataTwo = [];
          this.toDeptDataTwo = [];
          if (this.fenceId != 0) {
            this.getFenceAlarm(this.fenceId);
          }
        }
        this.file = new FormData();
        this.closeDialog();
      })
      // this.staffTree();
      // this.deptTree();
    },
    //删除告警任务
    handleDelete (index, row) {
      this.selectIndex = index;

      //设置删除提示框为可见状态
      this.delVisible = true;
      this.alarmId = row.idx;
    },
    //  确定删除
    deleteRow () {
      //隐藏删除提示框
      let param = [
        { 'idx': this.alarmId }
      ];
      this.delVisible = false;
      this.$api.alarmmanage.alarmDelete(param).then(res => {
        let RES = this.responseUse(res, true);
        if (RES) {
          this.getAlarmData();
        }
      })
    },

    //分页导航
    handleSizeChange (val) {
      this.pageSize = val;
      this.getAlarmData();
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      this.getAlarmData();
    },
    //是否全选
    handleCheckAllChange (val) {
      this.checkedWeeks = val ? this.weekDays : [];
      this.isIndeterminate = false;
    },
    handleCheckedWeekChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.weeks.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.weeks.length;
    },
    // 监听穿梭框组件添加
    addPeople (from, to, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      let objPeople = obj.nodes;

      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          this.toPeopleDataTwo.push(objPeople[i].id);
        }
      }
    },

    // 监听穿梭框组件移除
    removePeople (from, to, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      let objPeople = obj.nodes;

      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          for (let k = 0; k < this.toPeopleDataTwo.length; k++) {
            if (objPeople[i].id == this.toPeopleDataTwo[k]) {
              this.toPeopleDataTwo.splice(k, 1);
            }
          }
        }
      }
    },

    addDept (from, to, obj) {
      let deptObj = obj.nodes;
      for (let i = 0; i < deptObj.length; i++) {
        if (deptObj[i].children == undefined) {
          this.toDeptDataTwo.push(deptObj[i].id);
        }
      }
    },

    removeDept (from, to, obj) {
      let deptObj = obj.nodes;
      for (let i = 0; i < deptObj.length; i++) {
        if (deptObj[i].children == undefined) {
          for (let k = 0; k < this.toDeptDataTwo.length; k++) {
            if (deptObj[i].id == this.toDeptDataTwo[k]) {
              this.toDeptDataTwo.splice(k, 1);
            }
          }
        }

      }
    },

    //是否启用
    isSwitch (val) {
      console.log(val);
    },
    handleOneDelete (index, row) {
      this.selectIndex = index;
      this.fenceList.splice(this.selectIndex, 1);
    },
  },

}
</script>
<style>
.upload-demo .el-button--primary {
  /*width: 82px !important;*/
  float: left !important;
}
</style>
<style scoped>
#body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

.handle-box {
  background-color: #939e89;
  padding: 10px;
  margin-bottom: 10px;
  min-width: 950px;
}

.buttonRt {
  float: right;
}

.clear {
  clear: both;
}

.areaSelect {
  position: absolute;
  right: 10px;
  width: 242px;
  z-index: 2000;
}

span {
  margin-left: 0px;
  font-size: 13px;
}

.datalist {
  width: 100%;
  min-width: 1150px;
}

.fenceTable {
  width: 300px;
  background-color: #fff;
  position: fixed;
  z-index: 100;
  top: 325px;
  right: 0;
}

.crumbs {
  margin: 25px 0;
}

.changeBtn {
  width: 235px;
  margin-top: 5px;
  margin-right: 17px;
  z-index: 9999;
  float: right;
}

.changeBtn >>> i {
  font-size: 16px;
}

.vue-treeselect {
  display: inline-block;
  top: 8px;
}

#mapbox >>> .ol-unselectable {
  bottom: 30px !important;
}

.upload-demo .el-button--primary {
  float: left !important;
}

.upload-demo >>> .el-upload-dragger {
  height: 32px !important;
}
</style>


